<template>
	<view class="content">
        <u-navbar bgColor="#fff" 
            :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="工资发放详情"  rightIcon="search" @rightClick="rightClick">
        </u-navbar>

        <view class="uni-area">
            <!-- 工资发放概况 -->
            <uni-item-base class="u-m-t-30" :baseData="generalData" />
        
            <!-- 工资发放附件 -->
            <view class="u-m-t-30">
                <view class="u-font-32 font-bold">工资发放附件</view>
                <uni-accessory class="u-m-t-30" :accessorys="accessoryList"></uni-accessory>
            </view>

            <!-- 工资发放列表 -->
            <view class="u-m-t-30">
                <view class="u-font-32 font-bold">工资发放列表</view>
                <uni-item-wage-member class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" />
            </view>

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 发放业务编号【必传】
                id: null, 
                // 工资发放概况
                generalData:{
                    line: false,
                    title: '工资发放概况',
                    list:[
                        { filed:'ffgzny', title:'工资期（间）', value: 0 },
                        { filed:'ffrq', title:'发放日期', value: 0 },
                        { filed:'sub', title:'涵盖分包单位数', value: 0 }, // 涵盖分包企业数
                        { filed:'project', title:'涵盖班组数', value: 0 },
                        { filed:'ffrs', title:'发放人数', value: 0,unit:'人' },
                        { filed:'sfgzhj', title:'发放金额', value: 0, unit:'万元' },
                        // id 发放业务id
                    ]
                },
                // 附件
                accessoryList:[],
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'loading',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getWgWageMemberList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad(option) {
            this.id = option.id
            // 工资发放概览
            this.getWgWageDetailOverview(option.id)
            // 工资发放附件
            this.getAccessory(option.id)
            // 工资发放列表
            this.getWgWageMemberList()
        },

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){   
                uni.navigateTo({ url: '/pages/common/search?type=wagemember&ywbh='+this.id })
            },
            // 人员工资详情
            detail(){
                uni.navigateTo({ 
                    url: '/pages/wage-bag/member-detail' 
                })
            },
            

            // 工资发放概览
            getWgWageDetailOverview(id){
                this.$request( this, this.$apis.wgWageDetailOverview, {id:id} ).then(res => {
                    // console.log('工资发放概览',res)
                    this.generalData.list.map((v,i)=>{
                        v.value = res[v.filed]
                    })
                }).then()
            },
            // 工资发放附件
            getAccessory(id){
                uni.showLoading({ title:'附件信息加载中' })
                const parameter = {
                    ywlx: 'salary_kqgzgl', // 业务类型【必传】
                    ywbh: id, // 业务编号【必传】
                }
                // console.log('工资发放附件-参数',parameter)
                this.$request( this, this.$apis.CommonFjList, parameter ).then(res => {
                    // console.log('工资发放附件',res)
                    this.accessoryList = res
                }).then()
            },
            // 工资发放列表
            getWgWageMemberList(){
                const prameter = Object.assign( {ywbh:this.id}, this.paging )
                // console.log( '工资发放列表-参数',prameter )
                this.$request(this,this.$apis.wgWageMemberList,prameter).then(res=>{
                    // console.log('工资发放列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂未查询到更多工资相关数据')
                    }
                }).then()
            },


            // 返回顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0,  duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .item{
            border-bottom: 1rpx solid #eee;
            &:last-child{
                border: none;
            }
        }
    }
</style>
